<template>
	<view class="content">
		<view class="status_bar"></view>
		<Head class="headers" :webtext="webtext"></Head>
		<view class="body">
			<view class="box-felx-row">
				<view class="timeBox">
					<view @click="selStart">{{ defaultStartTime }}</view>
					<u-picker
						mode="time"
						:defaultTime="defaultStartTime"
						v-model="startShow"
						:params="paramsTime"
						end-year="2030"
						@confirm="confirmStart"
						confirm-color="#F6AB00"
					></u-picker>
				</view>
				<view style="line-height: 60upx;">~</view>
				<view class="timeBox">
					<view @click="selEnd">{{ defaultEndTime }}</view>
					<u-picker
						mode="time"
						:defaultTime="defaultEndTime"
						v-model="endShow"
						:params="paramsTime"
						end-year="2030"
						@confirm="confirmEnd"
						confirm-color="#F6AB00"
					></u-picker>
				</view>
			</view>
			<view class="listHeader">
				<text>金额</text>
				<text>充值时间</text>
				<text>备注</text>
			</view>
			<view class="box1">
				<view v-for="(item, index) in dataList" :key="index">
					<text>{{ item.money }}</text>
					<text style="width: 40%;">{{ item.create_at }}</text>
					<text>{{ item.remark }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Head from '../../components/head.vue';
export default {
	components: {
		Head
	},
	data() {
		return {
			webtext: '入金记录',
			shouSelect: false,
			paramsTime: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			startShow: false,
			endShow: false,
			defaultStartTime: '',
			defaultEndTime: '',
			status: 'loadmore',
			loadText: {
				loadmore: '释放更新',
				loading: '加载中...'
			},
			dataList: [],
			show: true
		};
	},
	onLoad() {
		this.defaultStartTime = this.getDate();
		this.defaultEndTime = this.getDate();
		this.getList();
	},
	methods: {
		getList() {
			this.$u.api
				.getrechargerecord({
					start: this.defaultStartTime,
					end: this.defaultEndTime
				})
				.then(res => {
					this.dataList = res;
				});
		},
		selStart() {
			this.startShow = true;
		},
		selEnd() {
			this.endShow = true;
		},
		confirmStart(e) {
			this.defaultStartTime = e.year + '-' + e.month + '-' + e.day;
			this.getList();
		},
		confirmEnd(e) {
			this.defaultEndTime = e.year + '-' + e.month + '-' + e.day;
			this.getList();
		},
		changeStatus(index) {
			this.current = index;
		},
		getDate(type) {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		}
	}
};
</script>

<style lang="scss" scoped>
.headers {
	position: fixed;
	top: 0;
}
.box-felx-row {
	padding: 16upx;
	display: flex;
	justify-content: space-between;
	height: 92upx;
	color: #6b6b6b;
	font-size: 1em;
	position: fixed;
	top: 80upx;
	z-index: 9;
	width: 100%;
	.timeBox {
		width:44%;
		height: 60upx;
		padding: 0 6upx;
		float: left;
		line-height: 60upx;
		margin-right: 10upx;
		font-size: 0.8em;
		text-align: center;
		color: #f1f1f1;
		border: 2upx solid rgba(255, 255, 255, 0.5) !important;
	}
}
.listHeader {
	display: flex;
	position: fixed;
	top: 140upx;
	justify-content: space-around;
	width: 100%;
	margin: 40upx auto;
	text-align: center;
	background-color: #323a5d;
	padding: 4upx;
	border-radius: 4upx;
	color: #fff;
	line-height: 1.8;
}
.box1 {
	height: calc(100vh - 250upx);
	width: 100%;
	position: fixed;
	top: 250upx;
	color: #fff;
	overflow-y: auto;
	view {
		display: flex;
		justify-content: space-around;
		height: 60upx;
		uni-text{
			width: 25%;
			text-align: center;
		}
	}
}
</style>
